<template>
  <div>
    <app-header type="home"></app-header>

    <div class="app-content">
      <div class="layer-loading" v-show="loading"><i></i><i></i><i></i></div>
      <transition name="scale" mode="out-in" appear>
        <router-view class="app-content-view" @loaded="loaded"></router-view>
      </transition>
    </div>

    <app-footer :type=" 'home'"></app-footer>

    <div id="toast-container"></div>

  </div>
</template>

<script>
  import AppHeader from './partials/app-header.vue'
  import AppFooter from './partials/app-footer.vue'

  export default {
    data: () => ({
      loading: 0
    }),
    beforeRouteUpdate(to, from, next) {
      this.loading = 1
      next()
    },
    mounted () {
      document.body.classList.remove('preloader')
    },
    methods: {
      loaded(state) {
        this.loading = state
      }
    },
    components: {AppHeader, AppFooter}
  }
</script>